<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html{
            font-size: 10px;
        }
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            font-size: 1.6rem;
        }
        p{
            width: 100%;
            height: 50px;
            background-color: aquamarine;
        }
        h2{
            width: 100%;
            height: 100px;
            background-color: beige;
            margin-top: 20px;

        }
        span{
            background-color: orchid;

        }
    </style>
</head>
<body>
<!--
   rem:相对于html根节点进行设定，不参照父级，一切以html为依据
   html的font-size改变，里面才改变，父级改变，里面的font-size不会变
   1rem=16px；
-->
<div>
    这是外层盒子的文字
    <p>这是一个段落</p>
    <h2>
        这是一个标题
        <span>这是一个副标题</span>
    </h2>
</div>
</body>
</html>